body{
    height: 100%;
    background-image: url(../../project/imgs/bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
	cursor: pointer;
}

.main{
	width:700px;
	margin: 10px auto;
	overflow: hidden;	
}

.view{
	width: 200px;
	height: 200px;
	overflow: hidden;
	position: relative;
	margin: 5px auto;
	float: left;
	text-align: center;
}
.view a{
	text-decoration: none;
	color: white;
	font-size: 18px;

}

.hover{
	width: 200px;
	height: 200px;
	background: rgba(0, 0 ,0 ,0.5);
	position: absolute;
	top: 40px;
	left: 0;
	text-align: center;
	color: #fff;
	transform: rotate(55deg);
	-moz-transform: rotate(55deg);
	-webkit-transform: rotate(55deg);
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	overflow: hidden;
	height: 0;
	z-index: 4000;
}
/*写好样式，进行隐藏，用overflow:hidden; height:0;*/
.hover h3{
	color: #fff;
	border-bottom: 2px solid rgba(255, 255 ,255, 0.5);
	padding-bottom: 10px;
}
.hover h3 a{
	color: #fff;
	text-decoration: none;	
}

.view:hover .hover{
	height: 120px;
	transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}

/*before   after为选择器，一般给选择器加动画背景，设置动画样式*/
.view:before{
	content: "";
	position: absolute;
	top: -240px;
	right: 0;
	width: 360px;
	height: 360px;
	background: rgba( 150, 50, 100,0.5);
	transform: rotate(55deg) translateX(60px);
	-moz-transform: rotate(55deg) translateX(60px);
	-webkit-transform: rotate(55deg) translateX(60px);
	transform-origin: 100% 0%;
	-moz-transform-origin: 100% 0%;
	-webkit-transform-origin: 100% 0%;
	transition: all 0.5s ease 0.3s;
	-moz-transition: all 0.5s ease 0.3s;
	-webkit-transition: all 0.5s ease 0.3s;
}

/*写好样式，进行隐藏，用top:-240px;*/
.view:hover:before{
	top: 0;
}

.view:after{
	content: "";
	position: absolute;
	/*bottom: -240px;*/
	left: 0;
	width: 360px;
	height: 360px;
	background: rgba( 150, 50, 100,0.5);
	transform: rotate(55deg) translateX(-60px);
	-moz-transform: rotate(55deg) translateX(-60px);
	-webkit-transform: rotate(55deg) translateX(-60px);
	transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-webkit-transform-origin: 0% 100%;
	transition: all 0.5s ease 0.3s;
	-moz-transition: all 0.5s ease 0.3s;
	-webkit-transition: all 0.5s ease 0.3s;
}

.view:hover:after{
	bottom: 0px;
}
#content{
	width: 600px;
	margin: 10px auto;
	border: 1px solid white;
}
#content h1{
	text-align: center;
	color: #fff;
}
#left-item{
	float: left;
}
#right-item{
	float: right;
}
#left-item span{
	color: yellow;
	font-size: 26px;
}
#content #right-item span{
	color: springgreen;
	font-size: 26px;
}
#content ul li{
	margin: 0;
	padding: 0;
	list-style: none;
}
#content li{
	margin-left: -5px;
}
#left-item a{
	font-size: 20px;
	color: white;
}
#right-item a{
	font-size: 20px;
	color: white;
}
